<template>
	<div class="moreselect">

			<el-input class="input-box" ref="inputbox" v-model="input" @input="changeInput" @click="clickInput"
				placeholder="Please input">
				<template #suffix>
					<el-icon class="el-input__icon">
						<arrow-down style="transition: transform .3s;"
							:style="isShowSelect ? 'transform: rotate(180deg);' : 'transform: rotate(0deg);'" />
					</el-icon>
				</template>
			</el-input>
			<div class="box" v-show="isShowSelect">
				<div class="checkall-box">
					<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">
						Check all
					</el-checkbox>
					<el-button type="primary" size="small" @click="clickSure">确定</el-button>
				</div>
				<el-checkbox-group class="checkboxgroup" v-model="checkList">
					<el-checkbox class="checkbox" v-for="(item, index) in selectList.arr" :key="index"
						:label="item.label" />
				</el-checkbox-group>
			</div>

	</div>
</template>
<script>
import { reactive, ref, toRefs } from 'vue'
import { ArrowDown } from '@element-plus/icons-vue'
export default {
	name: 'moreselect',
	props: {
		list: {
			type: Array,
			default: () => {
				return []
			},
		},
		selectInfo: {
			type: Object,
			require: true
		}

	},
	components: {
		ArrowDown
	},
	setup(props) {
		const input = ref('') //input框中的输入内容
		const { list, selectInfo } = toRefs(props)
		let selectList = reactive({
			arr: []
		})
		selectList.arr = list.value
		let checkList = ref([])
		selectList.arr.forEach(element => {
			if (element.value === selectInfo.value.value) {
				checkList.value.push(element.value)
				input.value += element.value
			}
		});
		const checkAll = ref(false)
		const isIndeterminate = ref(true)
		const inputbox = ref(null)
		const handleCheckAllChange = (val) => {
			checkList.value = []
			if (val) {
				selectList.arr.forEach(element => {
					checkList.value.push(element.value)
				})
			}
			isIndeterminate.value = false
			// inputbox.value.focus()
			// isShowSelect.value = true
		}
		let isShowSelect = ref(false) //是否显示下拉
		const clickInput = (e) => { //获取焦点
			isShowSelect.value = !isShowSelect.value //显示下拉
		}
		const clickSure = () => { //点击确定
			input.value = ''
			checkList.value.forEach((item, index) => {
				if (index === checkList.value.length - 1) {
					input.value += item
				} else {
					input.value += item + ','
				}

			})


			isShowSelect.value = false //隐藏下拉
		}
		const changeInput = (val) => {
			selectList.arr = list.value.filter(item => {
				return item.label.indexOf(val) > -1
			})
			console.log(selectList, '==selectList')
		}
		return {
			input,
			checkList,
			checkAll,
			isIndeterminate,
			handleCheckAllChange,
			clickInput,
			isShowSelect,
			inputbox,
			clickSure,
			changeInput,
			selectList
		}
	}
}
</script>
<style scoped>
.moreselect{
	width: 100%;
	position: relative;
}
.box {
	background-color: #1e325d;
	border: 1px solid #000000;
	position: absolute;
	left: 0;
	width: 100%;
}

.label-style {
	color: #fff;
}

.checkall-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 10px;
}

.checkbox:hover {
	background-color: rgb(39, 65, 124);
}

.box :deep(.el-checkbox) {
	margin-right: 0;
}
.checkboxgroup{
	display: grid;
    padding: 0px 10px;
    height: 100px;
    overflow-y: scroll;

}

</style>